<h1>{$name}</h1>
{$pageText}

<div>
Найти город: <form id='find_delivery'><input type=text name='search'/></form>
</div>
<br>
<br>
	
<table id='cities_delivery'>
	{foreach $prices as $price}
		<tr class='{cycle values=',even'}'><td>{$price.city}</td><td style="text-align:right">{$price.price}</td></tr>
	{/foreach}
</table>

<script>
	$( function() {
		$('#cities_delivery tr').on( {
			'mouseover': function(e) {
				$(this).closest('tr').addClass('hover');
			},
			'mouseout': function(e) {
				$(this).closest('tr').removeClass('hover');
			}
		} );
		
		$('#find_delivery').on( {
			'submit': function(e) {
				e.preventDefault();
				var search = $(e.target).find('input[type=text]').val();
				$('#cities_delivery tr').removeClass('active');
				$('#cities_delivery tr td:first-child').each( function(i) {
					if ($(this).html().indexOf(search)>=0) {
						$(this).closest('tr').addClass('active');
					}
				} );
			}
		} )
	} );
</script>

<style>
	#find_delivery {
		display: inline;
	}
	
	#cities_delivery {
		border-collapse: collapse;
	}
	
	#cities_delivery td {
		padding: 3px;
	}
	
	#cities_delivery td:first-child {
		width: 500px;
	}
	
	#cities_delivery tr.even td {
		background-color: #f4f2f3;
	}
	
	#cities_delivery tr.hover td {
		background-color: #7c5f8b;
		color: white;
	}

	#cities_delivery tr.active td {
		background-color: yellow;
	}

</style>